<!DOCTYPE html>
<html lang="en"  xmlns:shiro="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - FooTable</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/plugins/footable/footable.core.css}" rel="stylesheet">

    <link th:href="@{/asserts/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/style.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/asserts/css/bootstrap-tree-view-badge.css}">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">


    <div class="row">
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>菜单操作角色列表</h5>
                </div>
                <div class="ibox-content table-responsive">
                    <div class="col-sm-12 " id="tree">
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>新增菜单操作角色</h5>

                </div>
                <div class="ibox-content table-responsive">
                    <div class="col-sm-8 roleDoTable form-group">
                        <form th:method="post" id="roleForm">
                            <input class="form-control" id="uuid" name="uuid" placeholder="uuid" type="hidden">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label my-font-bold m-t-sm" for="name">角色名称<span
                                        style="color:red;">*</span></label>
                                <div class="col-sm-4">
                                    <input class="form-control" id="name" name="name"
                                           th:placeholder="角色名称" required>
                                </div>
                            </div>

                            <div class="col-sm-12 " id="powertree">
                            </div>

                            <textarea id="area" name="pows" rows="3" cols="20" style="display: none"></textarea>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group row">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-primary btn-sm badge-pill" th:text="#{message.save.add}"
                                            type="button" onClick="addRole();">[[#{message.save.add}]]
                                    </button>
                                    <button class="btn btn-secondary btn-sm badge-pill" th:text="#{message.save.edit}"
                                            type="button" onClick="editRole();">[[#{message.save.edit}]]
                                    </button>
                                    <button class="btn btn-danger btn-sm badge-pill" th:text="#{message.delete}"
                                            type="button" onClick="deleteRole();">[[#{message.delete}]]
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/pop/confirm::showConfirm"></div>

<script th:src="@{/asserts/js/jquery.min.js}"></script>
<script th:src="@{/asserts/js/bootstrap.min.js}"></script>
<script th:src="@{/asserts/js/plugins/footable/footable.all.min.js}"></script>
<script th:src="@{/asserts/js/content.min.js}"></script>
<script th:src="@{/asserts/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/asserts/js/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<script th:src="@{/asserts/js/tree-view/js/bootstrap-treeview-cl.js?v=1.1}" type="text/javascript"></script>
<script th:src="@{/asserts/js/layer/layer.min.js}" type="text/javascript"></script>

<script th:replace="common/myJs::myCommonJs"></script>
<script>
    $(function () {
        getTree();
        getPowerTree();
    });

    function getTree() {
        let url = '[[@{/sysrole/list}]]'
        $.ajax({
            url: url,
            type: "get",
            success: function (data) {
                data = eval('(' + data + ')');
                resolve(data)
            },
            error: function (data) {
            }
        });
    }

    function resolve(data) {
        $('#tree').treeview({
            collapseIcon: "fa fa-minus",
            nodeIcon: "fa fa-building-o",
            emptyIcon: "",
            showIcon: true,
            levels: 2,
            expandIcon: "fa fa-plus",
            data: data,
            showTags: true,
            onNodeSelected: function (event, data) {
                getPowerTree(data.uuid);
                $('#name').val(data.name)
                $('#uuid').val(data.uuid)
            }, onNodeUnselected: function (event, data) {
                $('#name').val('')
                $('#uuid').val('')
            }
        });
    }

    function getPowerTree(uuid) {
        let url = '[[@{/sysrole/powertree}]]'
        $.ajax({
            url: url,
            data: 'uuid=' + uuid,
            type: "get",
            success: function (data) {
                data = eval('(' + data + ')');
                resolvePowerTree(data)
            },
            error: function (data) {
            }
        });
    }

    function resolvePowerTree(data) {
        var nodeCheckedSilent = false;
        var nodeUncheckedSilent = false;
        $('#powertree').treeview({
            collapseIcon: "fa fa-minus",
            nodeIcon: "fa fa-building-o",
            emptyIcon: "",
            showIcon: true,
            levels: 1,
            expandIcon: "fa fa-plus",
            showCheckbox: true,
            multiSelect: true,
            data: data,
            showTags: true,
            onNodeChecked: nodeChecked,
            onNodeUnchecked: nodeUnchecked
        });
    }

    var nodeCheckedSilent = false;

    function nodeChecked(event, node) {
        if (nodeCheckedSilent) {
            return;
        }
        nodeCheckedSilent = true;
        checkAllParent(node);
        checkAllSon(node);
        nodeCheckedSilent = false;
    }

    let nodeUncheckedSilent = false;

    function nodeUnchecked(event, node) {
        if (nodeUncheckedSilent)
            return;
        nodeUncheckedSilent = true;
        uncheckAllParent(node);
        uncheckAllSon(node);
        nodeUncheckedSilent = false;
    }

    //选中全部父节点  
    function checkAllParent(node) {
        $('#powertree').treeview('checkNode', node.nodeId, {
            silent: true
        });
        let parentNode = $('#powertree').treeview('getParent', node.nodeId);
        if (!("nodeId" in parentNode)) {
            return;
        } else {
            checkAllParent(parentNode);
        }
    }

    //取消全部父节点
    function uncheckAllParent(node) {
        $('#powertree').treeview('uncheckNode', node.nodeId, {
            silent: true
        });
        let siblings = $('#powertree').treeview('getSiblings', node.nodeId);
        let parentNode = $('#powertree').treeview('getParent', node.nodeId);
        if (!("nodeId" in parentNode)) {
            return;
        }
        let isAllUnchecked = true; //是否全部没选中
        for (let i in siblings) {
            if (siblings[i].state.checked) {
                isAllUnchecked = false;
                break;
            }
        }
        if (isAllUnchecked) {
            uncheckAllParent(parentNode);
        }

    }

    //级联选中所有子节点  
    function checkAllSon(node) {
        $('#powertree').treeview('checkNode', node.nodeId, {
            silent: true
        });
        if (node.nodes != null && node.nodes.length > 0) {
            for (let i in node.nodes) {
                checkAllSon(node.nodes[i]);
            }
        }
    }

    //级联取消所有子节点
    function uncheckAllSon(node) {
        $('#powertree').treeview('uncheckNode', node.nodeId, {
            silent: true
        });
        if (node.nodes != null && node.nodes.length > 0) {
            for (let i in node.nodes) {
                uncheckAllSon(node.nodes[i]);
            }
        }
    }


    function addRole() {
        prepare()
        let action = '[[@{/sysrole/add}]]'
        submitForm(action)
    }

    function prepare(){
        let roles = '';
        let name =$('#name').val();
        let a = $('#powertree').treeview('getChecked');
        if (!a || a.length == 0 || !name) {
            layer.alert('<em style=\'color:red\'>请完成信息<em>')
            return;
        }
        for (let i = 0; i < a.length; i++) {
            roles += a[i].text + ','
        }
        $('#area').val(roles);

    }

    function editRole() {
        prepare()
        let action = '[[@{/sysrole/edit}]]'
        submitForm(action)
    }

    function deleteRole() {
        let action = '[[@{/sysrole/del}]]'
        $('#confirmModal').modal("show");
        $("#confirmDelete").click(function () {
            submitForm(action)
            $('#confirmModal').modal("hide");
        });
    }

    function submitForm(action) {
        $("#roleForm").removeAttr('action');
        $("#roleForm").attr('action', action);
        $("#roleForm").submit();
    }
</script>
</body>

</html>